<template>
  <div id="tarbar_item">
     <van-nav-bar title="私享体验"
     :fixed=true
     >
       <van-icon name="search" slot="right" v-tap="{methods:seek}"/>
       <van-icon name="comment-o" slot="right" v-tap="{methods:news}"/>
     </van-nav-bar>
     <van-tabs v-model="active"
     swipeable
     :sticky=true
     >
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
       <van-tab title="全部">
         <van-card
          v-for="list1 in prolist"
          	:price="list1.pprice"
          	:desc="list1.pdesc"
          	:title="list1.pname"
          	:thumb="list1.pimg"
         	@click="detail(list1.pid)"
         >
         </van-card>
       </van-tab>
       <van-tab title="美食居家">
         <van-card
          v-for="list1 in prolist1"
          	:price="list1.pprice"
          	:desc="list1.pdesc"
          	:title="list1.pname"
          	:thumb="list1.pimg"
         	@click="detail(list1.pid)"
         >
         </van-card>
       </van-tab>
       <van-tab title="美妆时尚">
         <van-card
          v-for="list1 in prolist2"
          	:price="list1.pprice"
          	:desc="list1.pdesc"
          	:title="list1.pname"
          	:thumb="list1.pimg"
         	@click="detail(list1.pid)"
         >
         </van-card>
       </van-tab>
       <van-tab title="本地生活">
         <van-card
          v-for="list1 in prolist3"
          	:price="list1.pprice"
          	:desc="list1.pdesc"
          	:title="list1.pname"
          	:thumb="list1.pimg"
         	@click="detail(list1.pid)"
         >
         </van-card>
       </van-tab>
    </van-pull-refresh>
     </van-tabs>

  </div>
</template>

<script>
  import * as api from '../api/getProlist'
  export default{
    name:'Search',
    data(){
      return{
        isLoading: false,
        active: 0,
        prolist:[],
        prolist1:[],
        prolist2:[],
        prolist3:[]
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
      this.$emit('toparent',this.title)
      api.getProlist({uid:24765,pagesize:20}).then((data)=>{
      	console.log(data.data.data)
      	this.prolist=data.data.data
      });
      api.getProlist({uid:25918,pagesize:20}).then((data)=>{
      	console.log(data.data.data)
      	this.prolist1=data.data.data
      });
      api.getProlist({uid:26027,pagesize:20}).then((data)=>{
      	console.log(data.data.data)
      	this.prolist2=data.data.data
      });
      api.getProlist({uid:26028,pagesize:20}).then((data)=>{
      	console.log(data.data.data)
      	this.prolist3=data.data.data
      })
    },
    methods: {
      onRefresh() {
        setTimeout(() => {
          this.isLoading = false;
        }, 500);
      },
      seek(){
        this.$router.push('/seek')
      },
      news(){
        this.$router.push('/news')
      },
      detail(id){
      this.$router.push('/ask/'+id)
      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop>100){
          
        }else{

        }
      },
    },


  }
</script>

<style scoped="">
  .van-nav-bar__title{
    margin-left: 20px;
    text-align: left;
    font-size: 20px;
    font-weight: 600;
  }
  .van-nav-bar .van-icon{
    color: #000;
    font-size: 20px;
    margin: 0 14px;
    font-size: 0.6rem;
  }
  #tarbar_item /deep/ .van-tabs__wrap{
   border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
  #tarbar_item /deep/ .van-tabs__line{
    background: #f5ca03;
    bottom: 0.36rem;
   }
  .van-tab__pane{
    padding: 0 10px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .van-card{
    text-align: center;
    width: 160px;
    height: 220px;
    display: flex;
    flex-direction: column;
  }
  .van-card__content{
    text-align: center;
    width: 80px;
    height: 80px;
    position: absolute;
    left: 30%;
    top: 66%;
  }
  #tarbar_item >>> .van-card img{
    width: 120px;
    height: 120px;
    margin-left: 10px;
  }
</style>
